---
title: Installation
description: How to install and set up Chakra UI in your project
tags: ['principles']
---

> Version 2 of Chakra UI is only compatible with React 18. If you are still
> needing to use React 17 or earlier, please use
> [version 1 of Chakra UI](https://v1.chakra-ui.com/guides/first-steps).

To use Chakra UI in your project, run one of the following commands in your terminal:

```bash
npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion
```

```bash
yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion
```

After installing Chakra UI, you need to set up the `ChakraProvider` at the root
of your application. This can be either in your `index.jsx`, `index.tsx` or
`App.jsx` depending on the framework you use.

```jsx live=false
import * as React from 'react'

// 1. import `ChakraProvider` component
import { ChakraProvider } from '@chakra-ui/react'

function App() {
  // 2. Wrap ChakraProvider at the root of your app
  return (
    <ChakraProvider>
      <TheRestOfYourApplication />
    </ChakraProvider>
  )
}
```

## Framework Guide

Chakra UI works in your favorite framework. We've put together step-by-step
guides for these frameworks:

<FrameworkLinks />

## Learn

Watch our official courses and dive into dozens of videos that will teach you
everything you need to know about Chakra UI, from basics to advanced concepts.

<FeaturesCourses />

## Contribute

Whether you're a beginner or advanced Chakra UI user, joining our community is
the best way to connect with like-minded people who build great products with
the library.

<JoinCommunityCards />
